<script>
import TuiInput from "../../components/thorui/tui-input/tui-input.vue";
import xTimePicker from '../../components/x-time-picker/x-time-picker.vue'
import {commonStorage} from "../../utils/common";
import {getJingSuan} from "../../apis/user";
import NjBirthdayPicker from "../../components/nj-birthday-picker/nj-birthday-picker.vue";

export default {
  name: "baziActuarial",
  components: {NjBirthdayPicker, xTimePicker, TuiInput},
  data() {
    return {
      modalInfo: {
        name: '',
        year: '',
        month: '',
        day: '',
        hours: '',
        minute: '',
        sex: 0,
        sect: 2,
        type: '',
      },
      list: [
        {
          text: '男',
          value: 0,
          checked: true
        },
        {
          text: '女',
          value: 1,
        },
      ],
      schoolsList: [
        {
          text: '晚子时日柱算明天',
          value: 1,
        },
        {
          text: '晚子时日柱算当天',
          value: 2,
          checked: true

        },
      ],
      showSex: false,
      userInfo: {},
      isshowSchools: false,
      dataInfo: {},
      showData: false,
      btnLoading: false,

    }
  },
  onShow(options) {
    this.getUserInfo()
    console.log(this.userInfo)
    this.modalInfo = {
      ...this.modalInfo,
      ...this.chooseTime(this.userInfo.birthDate),
      type: this.userInfo.dataType,
      name: this.userInfo.nickName,
    }
    console.log(this.modalInfo)
  },
  methods: {
    async getUserInfo() {
      let userInfo =
          commonStorage.getStorageSync("userInfo") &&
          JSON.parse(commonStorage.getStorageSync("userInfo"));
      if (userInfo) {
        this.userInfo = userInfo;
      }
    },
    chooseTime(time) {
      const now = new Date(time);
      const year = now.getFullYear();
      const month = Number(String(now.getMonth() + 1).padStart(2, '0')); // 月份从0开始，需要加1，并补0
      const day = Number(String(now.getDate()).padStart(2, '0')); // 补0
      const hours = Number(String(now.getHours()).padStart(2, '0')); // 补0
      const minute = Number(String(now.getMinutes()).padStart(2, '0'));
      return {
        year,
        month,
        day,
        hours,
        minute,
      }
    },
    showSchools() {
      this.isshowSchools = true
    },
    onSchoolsClose() {
      this.isshowSchools = false
    },
    confirmSchools(e) {
      this.modalInfo.sect = e.options.value
      this.onSchoolsClose()
    },
    showSelect() {
      this.showSex = true
    },
    showTime() {
      this.$refs.xTimePickerRef && this.$refs.xTimePickerRef.show();
      // this.$refs.pickerRef.show();
    },
    onClose() {
      this.showSex = false
    },
    confirm(e) {
      this.modalInfo.sex = e.options.value
      this.onClose()
    },
    changeDate(e) {
      this.modalInfo = {
        ...this.modalInfo,
        ...e,
        type: e.calendar,
        hours: e.hour
      }
      console.log(this.modalInfo)
    },

    calculation() {
      const data = {
        ...this.modalInfo,
        api_key: '2DrZWaTp7NuN4prnq9fpMiA1Y',
        type: this.modalInfo.type === 'solar' ? 1 : 0
      }

      if (!data.name) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return;
      }
      if (!data.year || !data.month || !data.day || !data.hours || !data.minute){
        uni.showToast({
          title: '请选择出生日期',
          icon: 'none'
        })
        return
      }
      this.btnLoading = true
      getJingSuan({
        ...data
      }).then(res => {
        console.log(res)
        if (res.code === 1) {
          this.dataInfo = res.data
          this.showData = true
        }
      }).finally(() => {
        this.btnLoading = false
      })

    }
  },
}
</script>

<template>
  <div class="page">
    <div class="container">
      <div class="tit">八字精算</div>
      <!--      <div class="line"></div>-->
      <template v-if="!showData">
        <div class="small-tit">缘主姓名：</div>
        <tui-input v-model="modalInfo.name" :radius="10"
                   :size="24"
                   borderColor="#DEDEDE"
                   inputBorder padding="20rpx" placeholder="缘主姓名"
                   style="margin: 10rpx 0">
        </tui-input>

        <div class="small-tit">性别：</div>
        <view class="selected" @click="showSelect">{{ modalInfo.sex == 0 ? '男' : '女' }}</view>
        <tui-select :list="list" :show="showSex" btnBackground="#C89F62" checkboxColor="#C89F62"
                    @close="onClose" @confirm="confirm"></tui-select>

        <div class="small-tit">出生日期：</div>
        <view class="selected" @click="showTime">
          {{ modalInfo.type === "solar" ? '阳历' : '阴历' }}
          {{ modalInfo.year }}-{{ modalInfo.month }}-{{ modalInfo.day }} {{ modalInfo.hours }}:{{ modalInfo.minute }}
        </view>
        <xTimePicker ref="xTimePickerRef" :defaultValue="userInfo.birthDate"
                     :time-hide='[true, true, true, true, true,]' :timeLabel='["年", "月", "日", "时", "分",]'
                     @submit="changeDate"/>

<!--        <nj-birthday-picker ref="pickerRef" @submit="handleBirthdayDate" title="生日选择器" maskColor="rgba(0,0,0,0.3)"-->
<!--                            :defaultDate="new Date(userInfo.birthDate)" :defaultLunar="false"-->
<!--        ></nj-birthday-picker>-->

        <div class="small-tit">流派：</div>
        <view class="selected" @click="showSchools">{{
            modalInfo.sect == 2 ? '晚子时日柱算当天' : '晚子时日柱算明天 '
          }}
        </view>
        <tui-select :list="schoolsList" :show="isshowSchools" btnBackground="#C89F62" checkboxColor="#C89F62"
                    @close="onSchoolsClose" @confirm="confirmSchools"></tui-select>

        <tui-form-button
            :size="26"
            background="#C89F62"
            btnSize="medium"
            radius="50px"
            style="margin:40rpx auto"
            @click="calculation()"
            :loading="btnLoading"
            :disabled="btnLoading"
        >
          立即测算
        </tui-form-button>
      </template>
      <template v-if="showData">
        <div class="tit text-left">基本信息</div>

        <div class="small-tit">缘主姓名：{{dataInfo.baseInfo.name}}</div>
        <div class="small-tit">出生公历：{{dataInfo.baseInfo.gongli}}</div>
        <div class="small-tit">出生农历：{{dataInfo.baseInfo.nongli}}</div>
        <div class="small-tit">八字生辰：
          {{dataInfo.detailInfo.sizhuInfo.year.tg}}{{dataInfo.detailInfo.sizhuInfo.year.dz}}年（{{dataInfo.detailInfo.sizhuInfo.year.ny}}）
          {{dataInfo.detailInfo.sizhuInfo.month.tg}}{{dataInfo.detailInfo.sizhuInfo.month.dz}}月（{{dataInfo.detailInfo.sizhuInfo.month.ny}}）
          {{dataInfo.detailInfo.sizhuInfo.day.tg}}{{dataInfo.detailInfo.sizhuInfo.day.dz}}日（{{dataInfo.detailInfo.sizhuInfo.day.ny}}）
          {{dataInfo.detailInfo.sizhuInfo.hour.tg}}{{dataInfo.detailInfo.sizhuInfo.hour.dz}}时（{{dataInfo.detailInfo.sizhuInfo.hour.ny}}）
        </div>
        <div class="small-tit">星宿信息：{{dataInfo.baseInfo.xingxiu}}</div>
        <div class="small-tit">年柱纳音：{{dataInfo.detailInfo.sizhuInfo.year.ny}}命（司令：{{dataInfo.baseInfo.siling}}）</div>
        <div class="small-tit">命卦信息：{{dataInfo.baseInfo.minggua.mingguaName}}卦({{dataInfo.baseInfo.minggua.mingguaFangwei}})</div>
        <div class="small-tit">生肖星座：{{dataInfo.baseInfo.shengxiao}} {{dataInfo.baseInfo.xingzuo}}</div>
        <div class="small-tit">五行旺度：{{dataInfo.baseInfo.wuxingWangdu}} </div>
<!--        <div class="small-tit">五行喜忌：{{dataInfo.baseInfo.wuxing_xiji}} </div>-->
        <div class="small-tit">起运信息：{{dataInfo.baseInfo.qiyun}} </div>
        <div class="small-tit">交运信息：{{dataInfo.baseInfo.jiaoyun}} </div>
        <div class="small-tit">天干留意：{{dataInfo.baseInfo.tianganLiuyi}} </div>
        <div class="small-tit">地支留意：{{dataInfo.baseInfo.dizhiLiuyi}} </div>
        <div class="small-tit">
          胎元命身：胎息:{{dataInfo.baseInfo.taixi}}({{dataInfo.baseInfo.taixiNayin}})
          胎元:{{dataInfo.baseInfo.taiyuan}}({{dataInfo.baseInfo.taiyuanNayin}})
          命宫:{{dataInfo.baseInfo.minggong}}{{dataInfo.baseInfo.minggongNayin}}
          身宫:{{dataInfo.baseInfo.shenggong}}{{dataInfo.baseInfo.shenggongNayin}}
        </div>

        <div class="tit text-left">喜用神分析</div>
        <div class="small-tit">
          日主天干为【{{ dataInfo.baseInfo.xiyongshen.rizhuTiangan}}】, 同类为【{{ dataInfo.baseInfo.xiyongshen.tonglei}}】, 异类为【{{ dataInfo.baseInfo.xiyongshen.yilei}}】 {{ dataInfo.baseInfo.xiyongshen.qiangruo}}, 以【{{ dataInfo.baseInfo.xiyongshen.xiyongshen}}】为喜用神

        </div>
        <div class="small-tit">
          阴阳参考：{{ dataInfo.baseInfo.xiyongshen.yinyang}}
        </div>
        <div class="small-tit">
          五行统计：{{ dataInfo.baseInfo.xiyongshen.jinNumber}}金，{{ dataInfo.baseInfo.xiyongshen.muNumber}}木，
          {{ dataInfo.baseInfo.xiyongshen.shuiNumber}}水，{{ dataInfo.baseInfo.xiyongshen.huoNumber}}火，
          {{ dataInfo.baseInfo.xiyongshen.tuNumber}}土，自党：{{ dataInfo.baseInfo.xiyongshen.zidang }}，异党：{{ dataInfo.baseInfo.xiyongshen.yidang }}
        </div>
        <div class="small-tit">
          五行能量： 金：{{ dataInfo.baseInfo.xiyongshen.jinScore}}分，占比{{ dataInfo.baseInfo.xiyongshen.jinScorePercent}}，
          木：{{ dataInfo.baseInfo.xiyongshen.muScore}}分，占比{{ dataInfo.baseInfo.xiyongshen.muScorePercent}}，
          水：{{ dataInfo.baseInfo.xiyongshen.shuiScore}}分，占比{{ dataInfo.baseInfo.xiyongshen.shuiScorePercent}}，
          火：{{ dataInfo.baseInfo.xiyongshen.huoScore}}分，占比{{ dataInfo.baseInfo.xiyongshen.huoScorePercent}}，
          土：{{ dataInfo.baseInfo.xiyongshen.tuScore}}分，占比{{ dataInfo.baseInfo.xiyongshen.tuScorePercent}}，
        </div>

        <div class="tit text-left">日柱论命</div>
        <div class="small-tit">
         {{ dataInfo.detailInfo.sizhuInfo.sizhuIndication.xingge.rizhu }}
        </div>

        <div class="tit text-left">性格分析</div>
        <div class="small-tit">
          {{ dataInfo.detailInfo.sizhuInfo.sizhuIndication.wuxing.detailDescription }}
        </div>

        <div class="tit text-left">财运分析</div>
        <div class="small-tit">
          {{ dataInfo.detailInfo.sizhuInfo.sizhuIndication.caiyun.sanshishuCaiyun.simpleDesc}}
          {{ dataInfo.detailInfo.sizhuInfo.sizhuIndication.caiyun.sanshishuCaiyun.detailDesc}}
        </div>

        <div class="tit text-left">姻缘分析</div>
        <div class="small-tit">
          {{ dataInfo.detailInfo.sizhuInfo.sizhuIndication.caiyun.sanshishuCaiyun.simpleDesc}}
          {{ dataInfo.detailInfo.sizhuInfo.sizhuIndication.yinyuan.sanshishuYinyuan}}
        </div>

        <div class="tit text-left">运程分析</div>
        <div class="small-tit">
          {{ dataInfo.detailInfo.sizhuInfo.sizhuIndication.chenggu.description }}
        </div>

        <div class="tit text-left">五行分析</div>
        <div class="small-tit">
          {{ dataInfo.detailInfo.sizhuInfo.sizhuIndication.wuxing.detailDesc}}
          {{ dataInfo.detailInfo.sizhuInfo.sizhuIndication.wuxing.simpleDescription}}
        </div>

        <div class="tit text-left">命运分析</div>
        <div class="small-tit">
          {{ dataInfo.detailInfo.sizhuInfo.sizhuIndication.mingyun.sanshishuMingyun }}
        </div>

        <div class="tit text-left">十年大运</div>
        <div v-for="(item,index) in dataInfo.detailInfo.dayunInfo[0].liunianInfo" :key="index">
          <div class="small-tit" >
            流年：{{item.liunianIndication.liunianYear }}
          </div>
          <div class="small-tit" >
            [事业]：{{item.liunianIndication.shiye }}
          </div>
          <div class="small-tit" >
            [学业]：{{item.liunianIndication.xueye}}
          </div>
          <div class="small-tit" >
            [运势]：{{item.liunianIndication.yunshi}}
          </div>
          <div class="small-tit" >
            [姻缘]：{{item.liunianIndication.yinyuan}}
          </div>
          <div class="small-tit" >
            [财运]：{{item.liunianIndication.caiyun}}
          </div>
          <div class="small-tit" >
            [健康]：{{item.liunianIndication.jiankang}}
          </div>
        </div>
        <tui-form-button
            :size="26"
            background="#C89F62"
            btnSize="medium"
            radius="50px"
            style="margin:40rpx auto"
            @click="calculation()"
            :loading="btnLoading"
            :disabled="btnLoading"
        >
          重新测算
        </tui-form-button>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page, page {
  min-height: 100vh;
  background-color: #f2f3f5;
}

.text-left{
  text-align: left!important;
  background: #f9f8f8;
  padding: 5px;
  border-radius: 5px;
  margin: 10px 0;
}

.container {
  width: 700rpx;
  margin: 50rpx auto;
  padding: 40rpx;
  border-radius: 20rpx;
  background: #ffffff;
  box-shadow: 41rpx 41rpx 82rpx #e6e6e6,
  -41rpx -41rpx 82rpx #ffffff;
  box-sizing: border-box;

  .line {
    height: 1rpx;
    background-color: #E9E9E9;
    margin: 10rpx 0;
  }

  .tit {
    font-size: 30rpx;
    font-weight: 500;
    text-align: center;
  }

  .small-tit {
    font-size: 26rpx;
    font-weight: 500;
  }

  .selected {
    padding: 10rpx;
    border: 1px solid #dedede;
    font-weight: normal;
    border-radius: 5px;
    font-size: 28rpx;
    color: #999;
    margin: 10rpx 0;
  }
}
</style>
